<template>
  <div class='map'>
    <div id="map" class="map_area"></div>
  </div>
  

</template>
<script>
import mapjson from './sichuan.json'
import url from '../../../axios/apiUrl'
//引入api.js定义的方法index
import { getRequest } from '../../../api/indexGet'
export default {
  data() {
    return {
      isFirstMap: true,
      colorMapList: [],
      dataList:[]
    }
  },
  created() {
    // setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加 \
    // this.curTime = window.setInterval(() => {
    //   // setTimeout是自带清除定时器
    //   setTimeout(() => {
    //     this.districtGmv()
    //   }, 600)
    // }, 3000)
    // this.districtGmv()
  },
  beforeDestroy() {
    clearTimeout(this.curTime)
  },
  async mounted() {
    // 119数据大屏对外 对外 （区域成交查询 板块4）
    await this.districtGmv()
  },
  methods: {
    // 119数据大屏对外 对外 （区域成交查询 板块4）
    async districtGmv() {
      let res = await getRequest(url.districtGmv)
      if (res.data.code == '000000') {
       this.dataList = res.data.content
        // let from = data[0]
        let fromCoord = [104.065735, 30.659462]
        let coordListFlyGmv = []
        for (let i = 0; i <  this.dataList.flyGmv.length; i++) {
          let target =  this.dataList.flyGmv[i]
              // console.log(target)
          let targetCoord = [target.longitude, target.latitude]
          coordListFlyGmv.push([fromCoord, targetCoord])
        }
        let colorList = []
        if (this.isFirstMap) {
          this.colorMapList = this.dataList.districtGmv
          this.isFirstMap = false // 第一次请求进了，把这里设置为false，以后都不进来了
          for (let i = 0; i < this.colorMapList.length; i++) {
            let target = this.colorMapList[i]
            let colorForm = {}
            colorForm.name = target.name
            colorForm.value = target.gmv
            colorList.push(colorForm)
          }
        } else {
          for (let i = 0; i < this.colorMapList.length; i++) {
            this.colorMapList[i].gmv =
              res.data.content.districtGmv[i].gmv || this.colorMapList[i].gmv
            let target = this.colorMapList[i]
            let colorForm = {}
            colorForm.name = target.name
            colorForm.value = target.gmv
            colorList.push(colorForm)
          }
        }
        this.loadMap(coordListFlyGmv, colorList)
      }

      if (res.data.message == '系统异常') {
        this.$toast('网络异常，请稍后再试')
      } else if (res.data.code != '000000') {
        this.$toast(res.data.message)
      }

      this.curTime = setTimeout(() => {
        this.districtGmv()
      }, 3000);
    },
    loadMap(coordListFlyGmv, colorList) {
      var myChart = this.echarts.init(document.getElementById('map'))
      this.echarts.registerMap('SC', mapjson)
      let option = {
        silent: true,
        geo: {
          map: 'SC',
          show: false,
          roam: false, //  鼠标缩放和 平移漫游
        },
        visualMap: {
          show: false,
          min: colorList[0].value,
          max: colorList[20].value,
          inRange: {
            color: ['rgba(0,208,255,0.5)', 'rgba(0,208,255,0)'],
          },
        },
        series: [
          {
            type: 'map',
            map: 'SC',
            zlevel: 1,
            show: false,
            selectedMode: false,
            lebel: {
              show: true,
              color: '#ffffff',
              emphasis: {
                color: '#ffffff',
                show: false,
              },
              normal: {
                show: false, //关闭省份名展示
              },
            },
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  textStyle: {
                    color: '#fff',
                  },
                },
                borderWidth: 0, // 区域边框宽度
                borderColor: 'rgba(0,0,0,0)',
                // areaColor: '#141337',
                shadowBlur: 0, //16
              },
              emphasis: {
                borderWidth: 0,
                borderColor: '#cedeff',
                areaColor: 'rgba(255,121,26,1)',
                label: {
                  show: false,
                  textStyle: {
                    color: '#fff',
                  },
                },
              },
            },
            data: colorList,
          },
          {
            type: 'lines', //用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
            coordinateSystem: 'geo',
            zlevel: 9,
            effect: {
              //线特效的配置
              show: true,
              period: 3, //特效动画的时间
              trailLength: 0.7, //特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
              color: '#FF791A',
              symbolSize: 4, //特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
            },
            lineStyle: {
              normal: {
                color: '#FF791A',
                width: 0,
                curveness: 0.4, //边的曲度，支持从 0 到 1 的值，值越大曲度越大
              },
            },
            data: coordListFlyGmv, //线数据集。
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>
<style lang="less" scoped>
.map{
   overflow: hidden;
   width: 100%;
   position: relative;
    height: 7.5rem;
  .map_area {
  position: absolute;
  left: 50%;
  transform: translate(-62%, 0);
  top: -36px;
  width: 100%;
  height: 10rem;
}
/deep/canvas {
  width: 123% !important;
  height: 575px !important;
}
}

</style>
